import React, { Component, Fragment } from 'react';
import { StyleSheet } from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import FeatherIcon from 'react-native-vector-icons/Feather';
import { createStackNavigator, createAppContainer }from 'react-navigation';
import Home from './home/Home';
import HomeDetail from './home/HomeDetail';
import Find from './find/Find';
import FindDetail from './find/FindDetail';
import More from './more/More';
import Mine from './mine/Mine';
// 首页
const HomeNavigator = createStackNavigator({
  home: {screen: Home},
  homeDetail: {screen: HomeDetail},
}, {
  initialRouteName: 'home'
});
const HomeApp = createAppContainer(HomeNavigator);
// 发现
const FindNavigator = createStackNavigator({
  find: { screen: Find },
  findDetail: { screen: FindDetail },
}, {
  initialRouteName: 'find'
});
const FindApp = createAppContainer(FindNavigator);
// 更多
const MoreNavigator = createStackNavigator({
  more: {screen: More}
}, {
  initialRouteName: 'more'
});
const MoreApp = createAppContainer(MoreNavigator);
// 我的
const MineNavigator = createStackNavigator({
  mine: { screen: Mine },
}, {
  initialRouteName: 'mine'
});
const MineApp = createAppContainer(MineNavigator);
export default class Main extends Component {
  state = {
    selectedTab: 'home'
  }
  render() {
    return (
      <Fragment>
        <TabNavigator style={styles.tabBar}>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'home'}
            title="首页"
            renderIcon={() => <FontAwesomeIcon name='home' size={24} />}
            renderSelectedIcon={() => <FontAwesomeIcon name='home' size={24} color="#4F8EF7" />}
            onPress={() => this.setState({ selectedTab: 'home' })}
          >
            <HomeApp />
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'find'}
            title="发现"
            renderIcon={() => <FontAwesomeIcon name='search' size={24} />}
            renderSelectedIcon={() => <FontAwesomeIcon name='search' size={24} color="#4F8EF7" />}
            onPress={() => this.setState({ selectedTab: 'find' })}
          >
            <FindApp />
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'more'}
            title="更多"
            renderIcon={() => <FeatherIcon name='more-horizontal' size={24} />}
            renderSelectedIcon={() => <FeatherIcon name='more-horizontal' size={24} color="#4F8EF7" />}
            onPress={() => this.setState({ selectedTab: 'more' })}
          >
            <MoreApp />
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'mine'}
            title="我的"
            renderIcon={() => <FontAwesomeIcon name='child' size={24} />}
            renderSelectedIcon={() => <FontAwesomeIcon name='child' size={24} color="#4F8EF7" />}
            onPress={() => this.setState({ selectedTab: 'mine' })}
          >
            <MineApp />
          </TabNavigator.Item>
        </TabNavigator>
      </Fragment>
    )
  }
}
const styles = StyleSheet.create({
  tabBar: {
    width: '100%'
  },
});